<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vip</title>
    <style>
        body{
            background-color: rgba(39, 108, 219, 0.788);
        }

        .con {
            display: flex;
        }

        a {
            text-decoration: none;
        }

        .div1{
            font-size: 30px;
            position: relative;
            top: 50px;
            left: 380px;
            color: white;
        }

        .box {

            width: 300px;
            height: 100px;

            border-radius: 10%;

            position: relative;
            top: 90px;
            left: 400px;

            font-size: 40px;

            background-color: red;
            color: white;
            display: flex;
            align-items: center;
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
            animation: scaleAnimation 0.75s infinite;
        }

        @keyframes scaleAnimation {
            0% {
                transform: scale(1);
                /* 文本框缩放比例 */
            }

            50% {
                transform: scale(1.25);
            }

            0% {
                transform: scale(1);
                /* 文本框缩放比例 */
            }
        }

        hr{
            border-width: 5px;
            border-color: rgba(37, 99, 199, 0.788);
        }

        #p{
            font-size: 30px;
            color: rgb(255, 255, 255);
        }

        .tequan {
        width: 90px;
        height: 90px;
        border: 2px solid #0b1d76;
        /* border-radius: 50%; */
        border-radius: 20%;
        padding: 45px;
        /* 边距 */
        text-align: center;
        font-size: 20px;
        color: rgb(0, 0, 0);
        background-color: rgb(255, 203, 91);

        display: flex;
        align-items: center;
        /* 垂直居中 */
    }

        .div2{
            display: flex;
            justify-content: space-around;
            /* 在每个项目周围留有相等的空间 */
        }
    </style>
</head>

<body>
    <div class="con">

        <div>
            <img src="image\会员.jpg" alt="">
        </div>

        <div>
            <div class="div1">
                您还不是会员/会员已过期！
            </div>

            <a href="pay.html">
                <div class="box">
                    立即开通VIP
                </div>
            </a>
        </div>
        

    </div>

    <br><br><br>
    <hr>

    <p id="p">豪华VIP特权:</p>
    <div>
        
        <div class="div2">
            <div class="tequan"><b>千万付费曲库</b></div>
            <div class="tequan"><b>免费下载付费歌曲</b></div>
            <div class="tequan"><b>专享母带音质</b></div>
            <div class="tequan"><b>HIFI音效</b></div>
            <div class="tequan"><b>极速下载</b></div>
        </div>

        <br><br><br>

        <div class="div2">
            <div class="tequan"><b>云盘扩容</b></div>
            <div class="tequan"><b>专属皮肤</b></div>
            <div class="tequan"><b>尊贵身份标识</b></div>
            <div class="tequan"><b>MV下载特权</b></div>
            <div class="tequan"><b>会员抢先听</b></div>
        </div>
    </div>

</body>

</html>